<template>
  <div id="qrcodelist"> 


          <el-table :data="detaildata" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
          :row-class-name="tableRowClassName"  :border="true">
                
                 <el-table-column label="ID"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.invite_id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="名称"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="关联账号"  align='center' width="250px" >                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.adminer">
                            {{ scope.row.adminer.account }}-{{ scope.row.adminer.telphone }}-{{ scope.row.adminer.username }}
                        </span>
                    </template>
                </el-table-column>
                 <el-table-column label="匹配次数"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.get_count }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="客服名片"  align='center' >                   
                    <template slot-scope="scope">                   
                        <el-image 
                            style="width: 30px; height: 30px"
                            :src="mp_form.images" 
                            :preview-src-list="mp_form.mplist" class="imga"
                            @click="mp_but(scope.row)">
                        </el-image>
                    </template>
                </el-table-column>
                 <el-table-column label="头像"  align='center' >                   
                     <template slot-scope="scope">                   
                       <img  style="width: 30px; height: 30px" :src="urlimg + scope.row.head_img" /> 
                    </template>
                </el-table-column>
                <el-table-column label="二维码"  align='center'  width="150" >                   
                    <template slot-scope="scope">                   
                         <span v-if="scope.row.qr_code">
                             <el-image 
                                style="width: 30px; height: 30px"
                                :src="urlimg + scope.row.qr_code" 
                                :preview-src-list="scope.row.qr_code_picture" class="imga">
                            </el-image>
                        </span>
                        <span v-else>暂未上传</span>    
                    </template>
                </el-table-column>

                 <el-table-column label="操作" align='center' width="310px"  fixed="right">
                    <template slot-scope="scope">
                        <!-- <el-button size="mini"  type="primary"  class="button_class1" plain>删除</el-button>  -->
                        <el-button size="mini"  type="primary"  class="button_class2" plain @click="xg_but(scope.row)">修改</el-button> 
                        <el-button size="mini"  type="primary"  class="button_class1" plain @click="go_but(scope.row)">话术</el-button> 
                        <el-button size="mini"  type="primary"  class="button_class2" plain @click="mtk1_but(scope.row)">匹配</el-button>
                        <el-button size="mini"  type="primary"  class="button_class1" plain @click="mtk2_but(scope.row)">关联</el-button>
                    </template>
                </el-table-column>
 
           </el-table>  


             <!-- 修改二维码 -->
    <el-dialog title="修改二维码" :visible.sync="xg_mtk"  width="500px" :close-on-click-modal="false">
        <div style="width:100%;"> 


        <el-form ref="form"   label-width="70px" style="width:100%;">

            <el-form-item label="名称">
                        <el-input  v-model="mtk_form.title" placeholder="名称"></el-input>
            </el-form-item>        

              <el-form-item label="手机号">
                        <el-input  v-model="mtk_form.phone" placeholder="名称"></el-input>
            </el-form-item>  
         

              <el-row>
                <el-col :span="12">
                    <el-form-item label="二维码">
                            <el-upload 
                                    action="uploadUrl"  
                                    :show-file-list="false"   
                                    :before-upload="beforeupload_qrcode_pic"
                                    :http-request="ImgUploadSectionFile">
                                    <div class="avatar-uploader">
                                        <img v-if="pic_form_qrcode.head_img"  :src="pic_form_qrcode.head_img" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>
                            </el-upload>
                    </el-form-item> 
                </el-col>
                <el-col :span="12">
                     <el-form-item label="头像">
                            <el-upload 
                                    action="uploadUrl"  
                                    :show-file-list="false"   
                                    :before-upload="beforeupload_tx_pic"
                                    :http-request="ImgUploadSectionFile">
                                    <div class="avatar-uploader">
                                        <img v-if="pic_form_tx.head_img"  :src="pic_form_tx.head_img" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>
                            </el-upload>
                    </el-form-item> 
                </el-col>
            </el-row>

           


        </el-form>
  
            
        <div style="text-align: center;width:50%;margin:auto;">
            <el-button type="primary" class="custom_color_button" style="width:80%;" @click="xg_qr_but()">确认</el-button>
        </div>

        </div>
    </el-dialog>


      <!-- 匹配次数 -->
    <el-dialog title="匹配次数" :visible.sync="mtk1"  width="300px" :close-on-click-modal="false">
        <div style="width:100%;"> 


        <el-form ref="form"   label-width="0px" style="width:100%;">

            <el-form-item label="">
                        <el-input  v-model="mtk1_form.number" placeholder="请输入匹配次数"></el-input>
            </el-form-item>        


        </el-form>
  
            
        <div style="text-align: center;width:50%;margin:auto;">
            <el-button type="primary" class="custom_color_button" style="width:80%;" @click="mtk1_but_qr()">确认</el-button>
        </div>

        </div>
    </el-dialog>


     <!-- 关联账号 -->
    <el-dialog title="关联账号" :visible.sync="mtk2"  width="350px" :close-on-click-modal="false">
        <div style="width:100%;"> 


        <el-form ref="form"   label-width="0px" style="width:100%;">

            <el-select  v-model="mtk2_form.select_num" placeholder="请选择状态" style="width:100%;">
                    <el-option  v-for="(item,index) in mtk2_form.select_data" :key="index" :label="item.account + '-' + item.telphone" :value="item.uid"></el-option>
            </el-select>       


        </el-form>
  
            
        <div style="text-align: center;width:50%;margin:auto;margin-top:50px;">
            <el-button type="primary" class="custom_color_button" style="width:80%;" @click="mtk2_but_qr()">确认</el-button>
        </div>

        </div>
    </el-dialog>


 

   </div>
</template>

<script>

export default {
   name: 'qrcodelist',
   props:{
      detaildata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        xg_mtk:false,
        my_id:'',
         mtk_form:{
            title:'',
            phone:'',
            get_count:''
        },
        pic_form_qrcode:{ //二维码缩略图
            head_img:'',
            upfile:'',
       },
       pic_form_tx:{  //头像
           head_img:'',
            upfile:'',
       },
       
       mtk1:false,
       mtk1_form:{
         number:''
       },

       mtk2:false,
       mtk2_form:{
          select_data:[],
          select_num:''
       },

        mp_form:{
        mplist:['aaa.png'],
        images: require('@/assets/images/a1.png'),
        ewm_images: require('@/assets/images/a1.png'),
        tx_images: require('@/assets/images/a2.png'),
        text1:'王炎炎',
        text2:'客服',
        text3:'18242313000',
        text4:'41541646'
      }

    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 293
     this.mtk2_run()
  },
  mounted (){
    
  },
  methods: {
      mtk2_run(){
          this.post("/customer_service/listOfAdminerData", {
        }).then(res => {  
            console.log(res.result,"aaa")
            this.mtk2_form.select_data = res.result
        })
      },
      mp_but(row){
         
          this.mp_form.ewm_images = this.urlimg + row.qr_code
          this.mp_form.tx_images = this.urlimg + row.head_img
          this.mp_form.text1 = row.name
          this.mp_form.text3 = row.telphone
          this.mp_form.text4 = row.invite_id
          this.drawPhoto()
      },
      drawPhoto(){
        let _this = this
         var canvas = document.createElement("canvas");
          canvas.width = 675;
          canvas.height = 435;
          var context = canvas.getContext("2d");

          
          var myImage = new Image();
          myImage.src =  require('@/assets/images/a5.png') ; //背景图片 你自己本地的图片或者在线图片

          myImage.onload = function(){
               context.drawImage(myImage , 0 , 0 , 675 , 435);
               context.fill();
               context.font = "50px Courier New";
               context.fillStyle = "#fff";
               context.fillText(_this.mp_form.text1,50,100);
               context.font = "30px Courier New";
               context.fillStyle = "#fff";
               context.fillText(_this.mp_form.text2,50,150);
               context.font = "20px Courier New";
               context.fillStyle = "#fff";
               context.fillText('手机:' + _this.mp_form.text3,50,190);
               context.font = "20px Courier New";
               context.fillStyle = "#fff";
               context.fillText('ID:' + _this.mp_form.text4,50,220);

               
              var myImage2 = new Image();
              myImage2.setAttribute("crossOrigin",'anonymous');  //图片跨域引入
              console.log(_this.mp_form.ewm_images,"ffff")
              myImage2.src = _this.mp_form.ewm_images ;  //二维码图片
              myImage2.onload = function(){
              context.drawImage(myImage2 ,480 , 300 , 90 , 90);
                        var myImage3 = new Image();
                        myImage3.setAttribute("crossOrigin",'anonymous');
                        myImage3.src = _this.mp_form.tx_images ;  //头像图片
                        myImage3.onload = function(){
                        context.drawImage(myImage3 ,450 ,50 , 150 , 150);
                        var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                        _this.mp_form.mplist = [base64]  //上传凭证
                  }
              }


             

          }

     },
     xg_but(row){
          this.xg_mtk = true
          this.my_id = row.id
          this.mtk_form.title = row.name
          this.mtk_form.phone = row.telphone

          this.pic_form_qrcode.head_img = this.urlimg + row.qr_code
          this.pic_form_qrcode.upfile = row.qr_code

          this.pic_form_tx.head_img = this.urlimg + row.head_img
          this.pic_form_tx.upfile = row.head_img
     },
     xg_qr_but(){
        this.post("/customer_service/update", {
                csid:this.my_id,
                name:this.mtk_form.title,
                qr_code:this.pic_form_qrcode.upfile,
                head_img:this.pic_form_tx.upfile,
                telphone:this.mtk_form.phone
              }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.xg_mtk = false
                    this.$emit('up_list_fun')
                }else {
                    this.open1(res.message,'warning')
                }

            })
     },
     mtk1_but(row){
        this.my_id = row.id
        this.mtk1_form.number = row.get_count
        this.mtk1 = true
     },
     mtk1_but_qr(){
        this.post("/customer_service/updateGetCot", {
                csid:this.my_id,
                get_count:this.mtk1_form.number,
              }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.mtk1 = false
                    this.$emit('up_list_fun')
                }else {
                    this.open1(res.message,'warning')
                }

        })
     },
     mtk2_but(row){
        this.my_id = row.id
        this.mtk2_form.select_num = ''
        if(row.admin_uid != 0){
            this.mtk2_form.select_num = row.admin_uid
        }
        this.mtk2 = true
     },
     mtk2_but_qr(){      
        this.post("/customer_service/updateLinked", {
                csid:this.my_id,
                uid:this.mtk2_form.select_num,
              }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.mtk2 = false
                    this.$emit('up_list_fun')
                }else {
                    this.open1(res.message,'warning')
              }

        })
     },
     go_but(row){
        this.$router.push({
          path: '/index/speech',
          query: {
            name:row.name,
            id:row.id,
          }
        })

    },
      ImgUploadSectionFile(param){//图片上传    
      },
      beforeupload_qrcode_pic(file){  //商户封面
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form_qrcode.head_img=windowURL.createObjectURL(file);                
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url,"二维码")
               this.pic_form_qrcode.upfile = res.result.url    
            })

            return false;
     },
     beforeupload_tx_pic(file){
          if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.pic_form_tx.head_img=windowURL.createObjectURL(file);                
            
             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url,"头像")
               this.pic_form_tx.upfile = res.result.url    
            })

            return false;
     },


  }
}
</script>


<style scoped>
.imga>>>.el-icon-circle-close {
      color: white;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>